{extend name="template/base_default"}
{block name="header"}


<!--<link rel="stylesheet" href="__CSS__/common.css">-->
<link rel="stylesheet" href="__CSS__/index.css">
<link rel="stylesheet" href="__CSS__/weuix.min.css"/>
<link rel="stylesheet" href="__CSS__/weui.min.css">
<script src="__JS__/updown.js"></script>
<script src="__JS__/lazyimg.js"></script>
<script src="__JS__/pointtransfertools.js"></script>
<script src="__JS__/city.js"></script>
<script type="text/javascript" src="__JS__/public.js"></script>
<script type="text/javascript" src="__JS__/boye-city-picker.js"></script>
<script type="text/javascript" src="__JS__/jquery-weui.min.js"></script>
<style>

    body{
        background-image:url("__IMG__/bj.png");
        background-repeat:no-repeat;
        background-size:cover;
        display:inline-block;
        text-align: center;
        color:#eeeeee;
        width: 100%;
        background-attachment: fixed;
        margin: auto;
    }
    li{
        list-style:none;
    }
    .store-box{
        filter:alpha(opacity=50); /*IE滤镜，透明度50%*/
        -moz-opacity:0.5; /*Firefox私有，透明度50%*/
        opacity:0.5;/*其他，透明度50%*/
        height:130px;
        margin-top: 30px;
    }
    .store-box img {
        width:100px;
        height:100px;
        float:right;
        margin-right: 10px;
        margin-top: 10px;
    }
    .store-success{
        font-size: 18px;
        color:#545454;
        font-family: "Microsoft YaHei UI";
    }
    .store-text{
        float: left;
        margin-top: 30px;
        margin-left: 16px;
        text-align: left;
    }
    .store-detail{
        font-size: 14px;
        color:#8c8c8c;
        font-family: "Microsoft YaHei UI";
        margin-top: 12px;
    }
    .store-p{
        text-align: center;
        color:white;
        margin-top: 30px;
        font-family: "Microsoft YaHei UI";
        font-size: 18px;

    }
    #shop-list{
        width:100%;
        overflow: hidden;
    }
    #shop-search{
        margin-top: 10px;
        width:20px;
        height:20px;
    }
    #shop-search img{
        width:20px;

    }
    #shop-name{
        float:left;
    }
    .store-other {
        margin-top: 10px;
        margin-left: auto;
        margin-right: auto;
        height:100px;
        background-color: white;
        border-radius: 10px;
        width:90%;
        background-color: rgba(255, 255, 255, 0.2);
        overflow: hidden;
    }
    .store-other-img{
        width:60px;
        float: left;
        height:60px;
        margin-top: 20px;
        margin-left: 14px;

    }
    .store-other-right{
        float: left;
        margin-left: 10px;


        height:90px;
        margin-top: 14px;
    }
    .store-other-right-p1{
        font-family: "Microsoft YaHei UI";
        color:white;
        font-size: 16px;
        text-align: left;
    }
    .store-other-right-p2{
        font-family: "Microsoft YaHei UI";
        color:#c09853;
        font-size: 16px;
        text-align: left;
        float: left;
        margin-top: 2px;
    }
    .store-other-right-p3{
        font-family: "Microsoft YaHei UI";
        color:#f2f3f8;
        font-size: 14px;
        text-align: left;
        margin-top: 2px;
    }
    .store-name {
        width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
    }
    .searchbar{
        height:50px;
        margin-top:10px;
        width:100%;
        text-align: center;
    }
    .place{
        float:left;
        color:white;
        font-size: 16px;
        font-family: "Microsoft YaHei UI";
        margin-top: 20px;
        width:30%;

    }
    .search{
        width:90%;
        float:right;
        margin-right: 18px;
        border-radius: 40px;
        background-color: white;
        height:40px;
        background-color: rgba(255, 255, 255, 0.2);
        margin-top: 16px;

    }
    input{
        border:none;
        font-size: 18px;
        outline:none;
        margin-top: 8px;
        color:#545454;
    }
    .dropload-noData{
        margin-top: 30px;
        margin-left: 120px;
    }
    .weui-input{
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        padding-left: 0;
    }
</style>
{/block}
{block name="body"}


<div class="searchbar">
    <input class="weui-input" id="select" type="text" value="">
    <div class="search"><input type="text" id="shop-name" value="{$name}" style="text-indent:2em;color:white;width:80%;background: none" placeholder="请输入联盟商家"> <button id="shop-search" style="background: none;border: none;"><img src="__IMG__/search.png"> </button></div>
</div>
<div id="shop-list">

</div>
{/block}
{block name="footer"}
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript" src="https://map.qq.com/api/js?v=2.exp"></script>
<script>
    var cate = {$cate};

    $("#select").cityPicker({
        title: "请选择所在城市市",
        showDistrict: false,
        onChange: function (picker, values, displayValues) {
        },
        onClose: function(){
            localStorage.setItem('city_code', $("#select").data("code"));
            $('#shop-search').trigger('click');
        }
    });
    wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: "{$SignPackage['appId']}", // 必填，公众号的唯一标识
        timestamp:"{$SignPackage['timestamp']}" , // 必填，生成签名的时间戳
        nonceStr: "{$SignPackage['nonceStr']}", // 必填，生成签名的随机串
        signature: "{$SignPackage['signature']}",// 必填，签名，见附录1
        jsApiList: ['getLocation','openLocation'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    });

    wx.ready(function() {
        wx.getLocation({
            type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
            success: function (res) {
                console.log(res.latitude);
                localStorage.setItem('latitude', res.latitude); // 纬度，浮点数，范围为90 ~ -90
                localStorage.setItem('longitude', res.longitude);  // 经度，浮点数，范围为180 ~ -180。
                var accuracy = res.accuracy;
                console.log(accuracy);
                var point = new qq.maps.LatLng(res.latitude, res.longitude);
                //地址和经纬度之间进行转换服务
                geocoder = new qq.maps.Geocoder();
                geocoder.getAddress(point);
                geocoder.setComplete(function (result) {
                    console.log(result);
                   var str_city = result.detail.addressComponents.city;
                    var str_province = result.detail.addressComponents.province;
                    var province_name = str_province.substring(0,str_province.length-1);
                    var city_name = str_city.substring(0,str_city.length-1);
                    localStorage.setItem('city_name',city_name);
                    localStorage.setItem('address',province_name+' '+city_name);
                });
                //若服务请求失败，则运行以下函数
                geocoder.setError(function () {
                    alert("定位出错");
                });
            }
        });
    });


//    function getLocation(){
//        if (navigator.geolocation){
//            navigator.geolocation.getCurrentPosition(showPosition);
//        }else{
//            x.innerHTML="Geolocation is not supported by this browser.";
//        }
//    }
//    function showPosition(position){
//        localStorage.setItem('latitude', position.coords.latitude); // 纬度，浮点数，范围为90 ~ -90
//        localStorage.setItem('longitude', position.coords.longitude);  // 经度，浮点数，范围为180 ~ -180。
//    }

    $(document).ready(function(){

        $('#select').val(localStorage.getItem('address'));
        localStorage.setItem('city_code', serch_city(localStorage.getItem('city_name')));
        $('#shop-search').trigger('click');

    });
    $('#shop-search').click(function(){
        points = wgs2bd(parseFloat(localStorage.getItem('latitude')),parseFloat(localStorage.getItem('longitude')));
        localStorage.setItem('lat', points[0]);
        localStorage.setItem('lng', points[1]);
        localStorage.setItem('name',$('#shop-name').val());
        $("#shop-list").empty();
        var doClss = 'dropload-down';
        var page=0;//页数
        $('#shop-list').dropload({
            scrollArea : window,
            autoLoad : true,//自动加载
            domDown : {
                domClass   : doClss,
                domRefresh : '<div class="dropload-refresh f15 "><i class="icon icon-20"></i>上拉加载更多</div>',
                domLoad    : '<div class="dropload-load f15"><span class="weui-loading"></span>正在加载中...</div>',
                domNoData  : ''
            },
            loadDownFn : function(me){
                page++;
               // window.history.pushState(null, document.title, window.location.href);
                var result = '';
                $.ajax({
                    type: 'GET',
                    url:getBaseUrl()+'/web.php/shop/shoplistdata.html?p='+page+'&lng='+localStorage.getItem('lng')+'&lat='+localStorage.getItem('lat')+'&name='+localStorage.getItem('name')+'&city_code='+localStorage.getItem('city_code')+'&cate='+cate,
                    dataType: 'json',
                    success: function(data){
                        //  console.log(data);
                        var arrLen = data.data.list.length;
                        if(arrLen > 0){
                            for(var i=0; i<arrLen; i++){
                                switch (data.data.list[i].grade){
                                    case 0:star_score = '☆☆☆☆☆';break;
                                    case 1:star_score = '★☆☆☆☆';break;
                                    case 2:star_score = '★★☆☆☆';break;
                                    case 3:star_score = '★★★☆☆';break;
                                    case 4:star_score = '★★★★☆';break;
                                    case 5:star_score = '★★★★★';break;
                                    default:star_score = '★★★★★';
                                }
                                distance = data.data.list[i].distance > 1000 ? data.data.list[i].distance/1000 + '</span>公里</span></p>' : data.data.list[i].distance + '</span>米</span></p>';
                                result+='<a href="__BASE__/web.php/shop/shopdetail?seller_id='+data.data.list[i].id+'">'
                                        +'<div class="store-other">'
                                        +'<img class="store-other-img" src="__BASE__/index.php/picture/index?id='+data.data.list[i].main_img_small+'">'
                                        +'<div class="store-other-right">'
                                        +'<p class="store-other-right-p1"><span class="store-name">'+data.data.list[i].name+'</span><span  style="color:#c09853;margin-left: 10px">'+data.data.list[i].discount_rate*10+'折</span>'+'</p>'
                                        +'<span  style="color:#c09853;margin-left: 10px">月销量'+data.data.list[i].monthly_sales+'</span>'
                                        +'<p class="store-other-right-p2">'+star_score+'</p>'
                                        +'<p class="store-other-right-p3">'+data.data.list[i].price/100+'<span style="color:#8c8c8c">元/人</span><span>&nbsp&nbsp&nbsp&nbsp距离<span>'+distance
                                        +'</div>'
                                        +'</div>'
                                        +'</a>'
                                ;
                            }
                            // 如果没有数据
                        }else{
                            // 锁定
                            me.lock();
                            // 无数据
                            me.noData();
                        }

                        // 为了测试，延迟1秒加载
                        setTimeout(function(){
                            $('.'+doClss).before(result);
                            var lazyloadImg = new LazyloadImg({
                                el: '.weui-updown [data-img]', //匹配元素
                                top: 50, //元素在顶部伸出长度触发加载机制
                                right: 50, //元素在右边伸出长度触发加载机制
                                bottom: 50, //元素在底部伸出长度触发加载机制
                                left: 50, //元素在左边伸出长度触发加载机制
                                qriginal: false, // true，自动将图片剪切成默认图片的宽高；false显示图片真实宽高
                                load: function(el) {
                                    el.style.cssText += '-webkit-animation: fadeIn 01s ease 0.2s 1 both;animation: fadeIn 1s ease 0.2s 1 both;';
                                },
                                error: function(el) {

                                }
                            });
                            //
                            // 每次数据加载完，必须重置
                            me.resetload();
                        },10);
                    },
                    error: function(xhr, type){
                        me.resetload();
                    }
                });
            }
        });
    })
</script>
{/block}